<template>
  <el-card shadow="never" class="border-0">
    <!-- 顶部搜索 -->
    <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
      <el-row :gutter="20">
        <el-col :span="8" :offset="0">
          <el-form-item label="关键词">
            <el-input
              v-model="searchForm.keyword"
              placeholder="管理员昵称"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="8">
          <div class="flex items-center justify-end">
            <el-button type="primary" @click="getData">搜索</el-button>
            <el-button @click="resetSearchForm">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <!-- 新增数据、刷新数据 -->
    <div class="flex items-center justify-between mb-4">
      <el-button type="primary" size="small" @click="handleCreate"
        >新增</el-button
      >
      <el-tooltip effect="dark" content="刷新数据" placement="top">
        <el-button text @click="getData">
          <el-icon :size="20"><Refresh /></el-icon>
        </el-button>
      </el-tooltip>
    </div>
    <!-- 表单数据 -->
    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
      <el-table-column label="管理员" width="200">
        <template #default="{ row }">
          <div class="flex items-center">
            <el-avatar :size="40" :src="row.avatar">
              <img
                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
              />
            </el-avatar>
            <div class="ml-3">
              <h6>{{ row.username }}</h6>
              <small>ID:{{ row.id }}</small>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="所属角色">
        <template #default="{ row }">
          {{ row.role?.name || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="120">
        <template #default="{ row }">
          <el-switch
            :modelValue="row.status"
            :active-value="1"
            :inactive-value="0"
            :loading="row.statusLoading"
            :disabled="row.super == 1"
            @change="handleStatusChange($event, row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <!-- 超级管理员 -->
          <small v-if="scope.row.super == 1" class="text-sm text-gray-500"
            >暂无操作</small
          >
          <div v-else>
            <el-button
              type="primary"
              size="small"
              text
              @click="handleEdit(scope.row)"
              >修改</el-button
            >
            <el-popconfirm
              title="是否要删除该管理员？"
              confirmButtonText="确认"
              cancelButtonText="取消"
              @confirm="handleDelete(scope.row.id)"
            >
              <template #reference>
                <el-button text type="primary" size="small">
                  <el-icon :size="12">删除</el-icon>
                </el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="flex items-center justify-center mt-5">
      <el-pagination
        background
        layout="prev,pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="limit"
        @current-change="getData"
      />
    </div>
    <!-- 弹窗 -->
    <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
      <el-form
        :model="form"
        ref="formRef"
        :rules="rules"
        label-width="80px"
        :inline="false"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            placeholder="密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
            <ChooseImage />
        </el-form-item>
        <el-form-item label="所属角色" prop="role_id">
          <el-select
            v-model="form.role_id"
            placeholder="选择所属角色"
            clearable
          >
            <el-option
              v-for="item in roles"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="content">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
    </FormDrawer>
  </el-card>
</template>
<script setup>
import { reactive, ref, computed } from "vue";
import FormDrawer from "~/components/FormDrawer.vue";
import ChooseImage from "~/components/ChooseImage.vue";
// import {
//   getNoticeList,
//   createNotice,
//   updateNotice,
//   delNotice,
// } from "~/api/notice";
import {
  getManagerList,
  updateManagerStatus,
  createManager,
  updateManager,
  delManager,
} from "~/api/manager";
import { toast } from "~/composables/util";

const windowHeight = window.innerHeight || document.body.clientHeight;
const h = windowHeight - 64 - 44 - 40;

// 搜索
const searchForm = reactive({
  keyword: "",
});
// 重置
const resetSearchForm = () => {
  searchForm.keyword = "";
  getData();
};

const roles = ref([]);

const tableData = ref([]);
const loading = ref(false);

// 分页
const currentPage = ref(1);
const total = ref(0);
const limit = ref(10);

// 获取数据
function getData(p = null) {
  if (typeof p == "number") {
    currentPage.value = p;
  }
  loading.value = true;
  getManagerList(currentPage.value, searchForm)
    .then((res) => {
      console.log(res);
      tableData.value = res.list.map((o) => {
        o.statusLoading = false;
        return o;
      });
      total.value = res.totalCount;
      roles.value = res.roles;
    })
    .finally(() => {
      loading.value = false;
    });
}
getData();

// 表单
const formDrawerRef = ref(null);
const formRef = ref(null);
const form = reactive({
  username: "", // 用户名
  password: "", // 密码
  role_id: null, // 角色Id
  avatar: "", // 头像
  status: 1, // 状态
});
const rules = {
  username: [
    {
      required: true,
      message: "用户名不能为空",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
    },
  ],
};

// 自定义是否新增/修改的标志
const editId = ref(0);
const drawerTitle = computed(() => (editId.value ? "修改" : "新增"));

// 重置表单
function resetForm(row = false) {
  // 如果是新增 清空
  if (formRef.value) formRef.value.clearValidate();
  // 修改时，做循环遍历
  if (row) {
    for (const key in form) {
      form[key] = row[key];
    }
  }
}

// 新增
const handleCreate = () => {
  editId.value = 0;
  resetForm({
    username: "", // 用户名
    password: "", // 密码
    role_id: null, // 角色Id
    avatar: "", // 头像
    status: 1, // 状态
  });
  formDrawerRef.value.open();
};
// 提交
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (!valid) return;

    formDrawerRef.value.showLoading();

    // 提交时判断是新增还是修改
    const fun = editId.value
      ? updateManager(editId.value, form)
      : createManager(form);
    fun
      .then((res) => {
        toast(drawerTitle.value + "成功");
        // 修改时刷新当前页，新增时刷新第一页
        getData(editId.value ? false : 1);
        formDrawerRef.value.close();
        form.value = {};
      })
      .finally(() => {
        formDrawerRef.value.hideLoading();
      });
  });
};

// 修改
const handleEdit = (row) => {
  editId.value = row.id;
  resetForm(row);
  formDrawerRef.value.open();
};

// 删除
const handleDelete = (id) => {
  loading.value = true;
  delManager(id)
    .then((res) => {
      toast("删除成功");
      getData();
    })
    .finally(() => [(loading.value = false)]);
};

// 修改状态
const handleStatusChange = (status, row) => {
  row.statusLoading = true;
  updateManagerStatus(row.id, status)
    .then((res) => {
      toast("修改状态成功");
      row.status = status;
    })
    .finally(() => {
      row.statusLoading = false;
    });
};

</script>
